{extend name="public/base"}

{block name="title"}就行天下{/block}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/home/css/uploader.css" />
{js href="__STATIC__/home/css/jquery.jcrop.min.css" /}
<style>
    .shop_image.active {
        box-shadow: 5px 5px 5px #c35757;
    }
</style>
{/block}

{block name="main"}
<div class="pageControl discuss">
    <div class="main-top"></div>
    <div class="msui_nav msui_navTop">
        <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">店铺图片</h1>
    </div>

    <div class="weui-cells weui-cells_form">
        <div class="page__bd">
            <div class="weui-gallery" id="gallery" style=" display: none;">
                <span class="weui-gallery__img" id="galleryImg" style="background-image:url(__STATIC__/home/images/product1.png)"></span>
                <div class="weui-gallery__opr">
                    <a href="javascript:;" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
            </div>
            <div class="weui-cells__tips" style="margin-bottom: 10px;">
                <p>店铺图片最多可以上传20张</p>
                <p>长按图片可以设置店铺封面图片</p>
                <p>点击可以查看和删除原图</p>
            </div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles">
                                    {notempty name="data"}
                                    {volist name="data" id="vo"}
                                    <li class="weui-uploader__file shop_image {eq name='vo.is_main' value='1'}active{/eq}" data-tab="{$i-1}" style="background-image:url({$vo.thumb})" data-image="{$vo.image}" data-id="{$vo.id}"></li>
                                    {/volist}
                                    {/notempty}
                                </ul>
                                <div class="weui-uploader__input-box">
                                    <input id="uploaderInput" class="weui-uploader__input uploaderInput" type="file" accept="image/*" multiple="" data-quantity="array" data-action="shop_img" data-id="{$id}">
                                    <div class="fs06 weui-uploader_count"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
{js href="__STATIC__/home/js/jquery.jcrop.min.js" /}
{js href="__STATIC__/home/js/jquery.jcrop.upload.js" /}
{js href="__STATIC__/home/js/exif.js" /}
<script>
    SCOPE.upload_img_max_num = 20;
    SCOPE.upload_img_num = '{$data|count}';
    var obj = {
        shop_id : '{$id}'
    };
    $(function(){
        var dataTabCount=0;//选择删除的图片data-tab
        var $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),

//            $uploaderFiles = $("#uploaderFiles"),
            $uploadeDel=$('.weui-gallery__del');

//        $uploaderFiles.on("click", "li", function(){
//            $galleryImg.attr("style", 'background-image:url('+$(this).attr('data-image')+')');
//            dataTabCount=$(this).attr('data-tab');
//            $gallery.fadeIn(100);
//        });
//        $(document).on('click',$galleryImg,function (e) {
        $galleryImg.click(function(e){
            e.preventDefault();
            $gallery.fadeOut(100);
        });
        //删除图片
        $uploadeDel.on("click", function(e){
            e.preventDefault();
            $.confirm('确定删除图片？', function () {
                $.post('{:url("delete_image")}', obj, function (msg) {
                    if (msg.code == 200) {
                        console.log(msg);
                        $.toptip('删除成功！', 'success');
                        $gallery.fadeOut(100);
                        $(`[data-tab='${dataTabCount}']`).remove();
                        //剩余li的数量
                        var liCount=$('.weui-uploader__files li').length;
                        //重新排布data-tab
                        for(var j=1;j<liCount+1;j++){
                            $(`.weui-uploader__files li:nth-of-type(${j})`).attr('data-tab',j-1);
                        }
                        $('.weui-uploader__input-box').show();
                        $('.weui-uploader_count span').html(liCount);
                        //var imgSrc=$(this).parent().prev().css("background-image").split("\"")[1];
                    } else {
                        $.toptip(msg.msg);
                    }
                }, 'json');
            });
        });

        // 长按设为主图
        $(".shop_image").on({
            touchstart: function(e){
                var _this = $(this);
                timeOutEvent = setTimeout(function(){
                    timeOutEvent = 0;
                    if (_this.hasClass('active')) {
                        return false;
                    }
                    var _id = _this.attr('data-id');
                    $.confirm('确定设为主图？', function () {
                        $.post('{:url("save_main_image")}', {id : _id, shop_id : '{$id}'}, function (msg) {
                            console.log(msg);
                            if (msg.code == 200) {
                                $.toptip('设置成功', 'success');
                                window.location.reload();
                            } else {
                                $.toptip(msg.msg);
                            }
                        }, 'json');
                    });
                },500);
                e.preventDefault();
            },
            touchmove: function(){
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
                console.log(2)
            },
            touchend: function(){
                clearTimeout(timeOutEvent)
                if(timeOutEvent!=0){
                    $galleryImg.attr("style", 'background-image:url('+$(this).attr('data-image')+')');
                    dataTabCount=$(this).attr('data-tab');
                    $gallery.fadeIn(100);
                    console.log(3);
                    obj.id = $(this).data('id');
                }
                return false;
            }
        });
    });
</script>
{/block}